<template>
	<view class="shopping-car">
		<custom-nav-bar title="购物车"></custom-nav-bar>
		<view class="icon-empty" v-show="empty">
			<image src="/static/icons/empty-shop-cart.png" mode="widthFix" class="img"></image>
			<text class="text">购物车空空如也</text>
		</view>
		<view class="pay">
			<view class="checkbox" v-for="(shopList, index) in arrList" :key="shopList.value">
				<shop-card :shopList="shopList" :index="index" ref="childRef" @sb="handleShopChecked"></shop-card>
			</view>

			<view class="check-all">
				<view class="left">
					<checkbox :checked="boxChecked" @click="handleAllChecked" :disabled="empty" style="transform:scale(0.8)"
						activeBorderColor="#d1d1d1" />
					<text>全选</text>
				</view>
				<view class="right">
					<button @click="handlePay">一键结算</button>
				</view>
			</view>
		</view>
	</view>
	<!-- <view class="load-mark">
		
	</view> -->
</template>

<script setup>
import { computed, ref } from 'vue';
import { useShoppingCart } from '../../stores/shoppingCart';
import { useFoodList } from '../../stores/foodList';


const store = useShoppingCart();

const childRef = ref(null);

// 全选框选中状态
const boxChecked = ref(true);
// 全选
const handleAllChecked = () => {

	// 当购物车没有东西时，禁用全选
	if (!empty.value) {
		boxChecked.value = !boxChecked.value;

		// 全选所有商品
		childRef.value.forEach((e) => {
			e.boxChecked = boxChecked.value;
		});

		return
	}
};



// 店名前面的选择框，全选该店名的所有菜品
const handleShopChecked = () => {
	const arr = [];
	childRef.value.forEach((e) => {
		arr.push(e.boxChecked);
	});

	// 为保证在删除所有的购物车数据时结算左边的全选框为未选中状态，需要将更改全选框状态的任务设为异步，保证在empty.value的状态改变后，再对checked.value赋值
	const timer = setTimeout(() => {
		boxChecked.value = arr.reduce((a, e) => a && e) && !empty.value;
		clearTimeout(timer)
	})
};

// 一键结算函数
const handlePay = () => {

	if (!empty.value) {

		// 将选中的选项合并到一个数组中
		const data = arrList.value.filter((e, i) => childRef.value[i].boxChecked && e)

		// 是否选中商品
		if (data.length === 0) {
			uni.showToast({
				title: '没有选中的商品',
				icon: 'none'
			})
		}

		// 选中商品后，跳转到结算页面
		else {
			useFoodList().setFoodList(data);
			uni.navigateTo({
				url: '/pages/orderSubmit/orderSubmit'
			})
		}

	}
	else {
		uni.showToast({
			title: '购物车是空的',
			icon: 'none'
		})
	}
}

// 购物车数据
const arrList = ref([]);

// 模拟数据获取延时
const timer = setTimeout(async () => {
	arrList.value = await new Promise((res, rej) => {
		res(objs.value);
	});
	clearTimeout(timer);
}, 500);

// 数据获取
const objs = ref(store.shoppingCart)

// 购物车是否为空，为空时，显示"没有东西"的图标
const empty = computed(() => objs.value.length ? false : true)

// 无用数据
const obj = ref([
	{
		id: 'one',
		name: '隆江猪脚饭',
		checked: false,
		children: [
			{
				id: 'USA',
				nextId: 'one',
				name: '猪脚饭',
				checked: false,
				img: '../../static/images/food2.jpg',
				price: '12.5',
				num: 2,
				desc: '特辣/酸菜',
				sell: 666
			},
			{
				id: 'CHN',
				nextId: 'one',
				name: '鸭腿饭',
				checked: false,
				img: '../../static/images/food2.jpg',
				price: '12.5',
				num: 1,
				desc: '没有额外说明',
				sell: 666
			}
		]
	},
	{
		id: 'two',
		name: '汉堡王',
		checked: false,
		children: [
			{
				id: 'BRA',
				nextId: 'two',
				name: '巴西',
				checked: false,
				img: '../../static/images/food2.jpg',
				price: '12.5',
				num: 1,
				desc: '没有额外说明',
				sell: 666
			},
			{
				id: 'JPN',
				nextId: 'two',
				name: '日本',
				checked: false,
				img: '../../static/images/food2.jpg',
				price: '12.5',
				num: 1,
				desc: '没有额外说明',
				sell: 666
			}
		]
	}
]);
</script>
<style scoped lang="scss">
.shopping-car {
	// background-color: blanchedalmond;

	.icon-empty {
		text-align: center;

		.img {
			width: 100%;
		}

		.text {
			// color: #E98D52;
			font-size: 36rpx;
			font-weight: 600;
		}
	}

	.pay {

		.check-all {
			position: fixed;
			bottom: var(--window-bottom);
			height: 100rpx;
			background-color: #fcfcfc;
			border-top: #f1f1f1 1px solid;
			width: calc(100% - 80rpx);
			display: flex;
			padding: 0 40rpx;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.right {
				button {
					border-radius: 100px;
					width: 220rpx;
					height: 70rpx;
					line-height: 70rpx;
					background-color: #ff5000;
					color: white;
					text-align: center;
				}
			}

			/*#ifndef WEB*/
			bottom: 0rpx;
			/*#endif*/





		}


	}
}
</style>
<style></style>
